<template>
  <section class="user-detail-container bcl-bg">
    <div class="navbar flex flex-cc flex-rb">
      <div class="fz-17 fw-bold">{{ name }}</div>

      <div>
        <div
          class="del-btn flex flex-cc hover click radius p-5"
          @click="deleteFriend"
        >
          <img src="@/kang/img/icon_delete.png" />
          <div class="cl-error fz-12">删除好友</div>
        </div>
      </div>
    </div>

    <div class="user-header-content-container">
      <div class="header">
        <div>
          <BaseImage
            class="kang-avatar large mr-15"
            :src="sharedStateContact.currentFriend.portrait"
          ></BaseImage>
        </div>
        <div class="name">
          <div style="display: flex; align-items: center">
            <div class="fz-20 fw-bold">{{ name }}</div>
            <p
              v-if="isExternalDomainUser"
              class="single-line"
              style="
                color: #f0a040;
                border-radius: 2px;
                padding: 1px 2px;
                font-size: 9px;
              "
            >
              {{ domainName }}
            </p>
          </div>
        </div>
      </div>

      <div class="content">
        <ul>
          <!-- 备注 -->
          <li class="content-item">
            <div class="label">{{ $t('common.alias') }}</div>
            <div class="value flex flex-cc">
              <n-input
                class="kang-input--normal"
                style="width: 200px"
                ref="nInput"
                placeholder="备注"
                :disabled="!isEdit"
                @blur="updateFriendAlias"
                @keydown.enter="updateFriendAlias"
                v-model:value="sharedStateContact.currentFriend.friendAlias"
              ></n-input>

              <div
                class="edit-btn flex flex-center ml-15 hover click p-5 radius"
                @click="startEdit"
                v-if="!isEdit"
              >
                <img src="@/kang/img/icon_edit.png" />
              </div>
            </div>
          </li>

          <!-- 账号 -->
          <li class="content-item">
            <div class="label">{{ $t('common.wfc_id') }}</div>
            <div class="value">{{ user.name || '' }}</div>
          </li>

          <!-- IP地址 -->
          <li class="content-item">
            <div class="label">IP地址</div>
            <div class="value">{{ userInfo?.remote?.ip || '-' }}</div>
          </li>

          <!-- 手机型号 -->
          <li class="content-item">
            <div class="label">手机型号</div>
            <div class="value">{{ userInfo?.remote?.deviceModel || '-' }}</div>
          </li>
        </ul>
      </div>

      <div class="footer">
        <!-- 消息 -->
        <div class="action hover click" @click="chat">
          <div>
            <div class="icon flex flex-center">
              <img src="@/kang/img/icon_friend_msg.png" />
            </div>

            <div>消息</div>
          </div>
        </div>

        <!-- 语音 -->
        <div class="action hover click" @click="startAudioCall">
          <div>
            <div class="icon flex flex-center">
              <img src="@/kang/img/icon_friend_tel.png" />
            </div>

            <div>语音</div>
          </div>
        </div>

        <!-- 视频 -->
        <div class="action hover click" @click="startVideoCall">
          <div>
            <div class="icon flex flex-center">
              <img src="@/kang/img/icon_friend_video.png" />
            </div>

            <div>视频</div>
          </div>
        </div>

        <!-- 红包 -->
        <div class="action hover click">
          <div>
            <div class="icon flex flex-center">
              <img src="@/kang/img/icon_friend_red.png" />
            </div>

            <div>红包</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import store from '../../../store'
import ConversationType from '../../../wfc/model/conversationType'
import Conversation from '../../../wfc/model/conversation'
import wfc from '../../../wfc/client/wfc'
import WfcUtil from '../../../wfc/util/wfcUtil'
import api from '@/kang/js/api'

export default {
  name: 'UserDetailView',

  props: {
    user: null,
  },

  data() {
    return {
      userInfo: {},
      sharedStateContact: store.state.contact,
      isEdit: false,
    }
  },

  methods: {
    // 获取远程用户信息
    async getUserInfo(userId) {
      const params = {
        userId,
      }

      const { code, data } = await api.getUserInfo(params)

      if (code === 200) {
        this.userInfo.remote = data
      }
    },
    deleteFriend() {
      wfc.deleteFriend(
        this.sharedStateContact.currentFriend.uid,
        () => {
          this.sharedStateContact.currentFriend = null
          store._loadFriendList()
          $message.success('已删除')
        },
        (err) => {
          console.error('setFavGroup error', err)
        }
      )
    },
    startEdit() {
      this.isEdit = true
      setTimeout(() => {
        this.$refs.nInput?.focus()
      }, 0)
    },
    // 设置好友备注
    updateFriendAlias() {
      this.isEdit = false

      wfc.setFriendAlias(
        this.user.uid,
        this.sharedStateContact.currentFriend.friendAlias,
        () => {
          // do nothing
        },
        (error) => {
          // do nothing
        }
      )
    },
    chat() {
      let conversation = new Conversation(
        ConversationType.Single,
        this.user.uid,
        0
      )
      store.setCurrentConversation(conversation)
      this.$router.replace('/home')
    },
    startAudioCall() {
      let conversation = new Conversation(
        ConversationType.Single,
        this.user.uid,
        0
      )
      this.$startVoipCall({ audioOnly: true, conversation: conversation })
    },
    startVideoCall() {
      let conversation = new Conversation(
        ConversationType.Single,
        this.user.uid,
        0
      )
      this.$startVoipCall({ audioOnly: false, conversation: conversation })
    },
  },
  computed: {
    name() {
      let name
      let friend = this.sharedStateContact.currentFriend
      if (friend.displayName) {
        name = friend.displayName
      } else {
        name = friend.name
      }
      // side
      ;(async () => {
        wfc.getUserInfo(friend.uid, true)
        this.getUserInfo(this.sharedStateContact?.currentFriend?.uid)
      })()
      return name
    },
    isExternalDomainUser() {
      let user = this.sharedStateContact.currentFriend
      return WfcUtil.isExternal(user.uid)
    },
    domainName() {
      let user = this.sharedStateContact.currentFriend
      if (WfcUtil.isExternal(user.uid)) {
        let domainId = WfcUtil.getExternalDomainId(user.uid)
        let domainInfo = wfc.getDomainInfo(domainId)
        return '@' + domainInfo.name
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.del-btn {
  img {
    width: 20px;
    margin-right: 5px;
  }
}

.user-detail-container {
  position: relative;
  border-top-right-radius: var(--main-border-radius);
  border-bottom-right-radius: var(--main-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-header-content-container {
  width: 80%;
}

.header {
  display: flex;
  align-items: center;
  padding: 30px;
  border-bottom: 1px solid var(--color-border);
}

.content {
  padding: 30px;
  border-bottom: 1px solid var(--color-border);

  .content-item {
    display: flex;
    align-items: center;
    padding: 10px 0;

    .label {
      width: 100px;
      color: var(--color-basic);
    }
  }

  .edit-btn {
    img {
      width: 20px;
    }
  }
}

.footer {
  display: flex;
  justify-content: center;
  padding: 30px;
}

.footer .action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 60px;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--color-primary);
  font-size: 12px;

  &:not(:last-child) {
    margin-right: 20px;
  }

  .icon {
    height: 20px;

    img {
      width: 20px;
    }
  }
}
</style>
